<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">

<!--
tf-smoothing-input creates an input component for exponential smoothing.
-->
<dom-module id="tf-smoothing-input">
  <template>
    <div class="smoothing-line">
      <paper-checkbox
        checked="{{enabled}}"
        >Exponential smoothing</paper-checkbox>
      <div class="smoothing-block">
        <paper-slider
          value="{{decay}}"
          immediate-value="{{_immediateDecayNumberForPaperSlider}}"
          type="number"
          step="[[step]]"
          min="[[min]]"
          max="[[max]]"
          disabled="[[!enabled]]"
          ></paper-slider>
        <paper-input
          id="input"
          label="decay"
          no-label-float
          value="{{_inputDecayStringForPaperInput}}"
          type="number"
          step="[[step]]"
          min="[[min]]"
          max="[[max]]"
          disabled="[[!enabled]]"
          ></paper-input>
      </div>
    </div>
    <style>
      .smoothing-line {
        margin-top: 15px;
      }

      .smoothing-block {
        display: flex;
      }

      paper-checkbox {
        --paper-checkbox-checked-color: var(--tb-ui-dark-accent);
        --paper-checkbox-unchecked-color: var(--tb-ui-dark-accent);
        font-size: 14px;
      }

      paper-slider {
        margin-left: 12px;
        --paper-slider-knob-color: var(--tb-orange-strong);
        --paper-slider-active-color: var(--tb-orange-strong);
        flex-grow: 2;
      }

      paper-input {
        --paper-input-container-focus-color: var(--tb-orange-strong);
        --paper-input-container-input: {
          font-size: 14px;
        };
        --paper-input-container-label: {
          font-size: 14px;
        };
        width: 60px;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-smoothing-input",

      properties: {
        enabled: {
          type: Boolean,
          value: false,
          notify: true,
          observer: '_enabledChanged'
        },

        step: Number,
        max: Number,
        min: Number,

        decay: {
          type: Number,
          value: 0.9,
          notify: true
        },

        _immediateDecayNumberForPaperSlider: {
          type: Number,
          notify: true,
          observer: '_immediateDecayNumberForPaperSliderChanged'
        },

        // Paper input treats values as strings even if you specify them as
        // numbers.
        _inputDecayStringForPaperInput: {
          type: String,
          notify: true,
          observer: '_inputDecayStringForPaperInputChanged'
        }
      },

      _updateDecay: _.debounce(function(val) {
        this.decay = val;
      }, 250),

      _enabledChanged: function() {
        // Workaround for paper-input bug on firefox :(
        // Element crashes if we change value while it is disabled.
        if (this.enabled) {
          this.$.input.label = '';
          this._immediateDecayNumberForPaperSliderChanged();
        }
      },

      _immediateDecayNumberForPaperSliderChanged: function() {
        if(!this.enabled) {
          return;
        }
        this._inputDecayStringForPaperInput =
            this._immediateDecayNumberForPaperSlider.toString();
        this._updateDecay.call(this, this._immediateDecayNumberForPaperSlider);
      },

      _inputDecayStringForPaperInputChanged: function() {
        if(!this.enabled) {
           return;
        }
        if (+this._inputDecayStringForPaperInput < 0) {
          this._inputDecayStringForPaperInput = '0';
        }
        else if (+this._inputDecayStringForPaperInput > 1) {
          this._inputDecayStringForPaperInput = '1';
        }

        var d = +this._inputDecayStringForPaperInput;
        if (!isNaN(d)) {
          this._updateDecay.call(this, d);
        }
      }
    });
  </script>
</dom-module>
